<template>
	<div class="main">
		<div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/forgearea/top.png">
				</div>
				<div>
					<img src="@/assets/images/wechat/student/forgearea/rank.png">
				</div>
			</div>
			<div>
				<div>
					<img src="@/assets/images/wechat/student/forgearea/1.png">
				</div>
				<div>
					<div>
						<div>
							<div>
								<div>
									<img src="@/assets/images/wechat/student/forgearea/680.png">
								</div>
								<div>
									<div>
										<div>
											<div>
												<input type="checkbox"/>
											</div>
											<div>累计回答正确6道题</div>
											<div>未完成</div>
											<div>
												<div>
													<img src="@/assets/images/wechat/student/forgearea/6.png">
												</div>
												<div>0/6</div>
											</div>
										</div>
									</div>
									<div>
										<div>
											<div>
												<input type="checkbox"/>
											</div>
											<div>累计回答正确6道题</div>
											<div>未完成</div>
											<div>
												<div>
													<img src="@/assets/images/wechat/student/forgearea/6.png">
												</div>
												<div>0/6</div>
											</div>
										</div>
									</div>
									<div>
										<div>
											<div>
												<input type="checkbox"/>
											</div>
											<div>累计回答正确6道题</div>
											<div>未完成</div>
											<div>
												<div>
													<img src="@/assets/images/wechat/student/forgearea/6.png">
												</div>
												<div>0/6</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div>
							<div>
								<div>
									<img src="@/assets/images/wechat/student/forgearea/38.png">
								</div>
								<div>初级任务宝箱</div>
							</div>
						</div>
					</div>
				</div>
				<div>完成所有任务解锁宝箱</div>
			</div>
		</div>
		<div>
			<div>
				<img src="@/assets/images/wechat/student/forgearea/39.png">
			</div>
			<div>确定</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				
			}
		},
		created:async function() {
			
		},
		beforeMount: function() {
	
		},
		mounted: function() {
	
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		width: 100%;
		height:100vh;
		overflow: auto;
		background-color: #670914;
		>div:nth-child(1){
			overflow: hidden;
			margin-top:34px;
			margin-left:16px;
			margin-right:16px;
			>div:nth-child(1){
				position: relative;
				>div:nth-child(1){
					width: 100%;
					>img{
						width:100%;
					}
				}
				>div:nth-child(2){
					width: 100%;
					position: absolute;
					top:0;
					left:0;
					>img{
						width:100%;
					}
				}
			}
			>div:nth-child(2){
				margin-top:45px;
				overflow: hidden;
				position: relative;
				width: 100%;
				>div:nth-child(1){
					width:100%;
					>img{
						width: 100%;
					}
				}
				>div:nth-child(2){
					position: absolute;
					top:112px;
					left:28px;
					right:28px;
					>div{
						position: relative;
						>div:nth-child(1){
							>div{
								position: relative;
								>div:nth-child(1){
									>img{
										width:100%;
									}
								}
								>div:nth-child(2){
									position: absolute;
									top:24px;
									left:4px;
									right:6px;
									>div{
										background-color: #F6ECC9;
										border:2px solid #D0C6AD ;
										>div{
											margin-left:10px;
											margin-right:10px;
											height:43px;
											display:flex;
											align-items: center;
											margin-top:6px;
											>div:nth-child(1){
												margin-top:3px;
											}
											>div:nth-child(2){
												font-size: 12px;
												font-weight: 400;
												color: #3D777B;
												margin-left:7px;
												margin-bottom: 2px;
												flex:1;
											}
											>div:nth-child(3){
												font-size: 9px;
												font-weight: normal;
												margin-bottom: 2px;
												color: #845214;
											}
											>div:nth-child(4){
												display: flex;
												justify-content:center;
												align-items: center;
												background-color: #8CF0D9;
												border-radius: 10px;
												font-size: 9px;
												font-weight: normal;
												color: #FFFFFF;
												width:48px;
												margin-left:15px;
												>div:nth-child(1){
													margin-right:5px;
													>img{
														width: 100%;
													}
												}
											}
										}
									}
								}
							}
						}
						>div:nth-child(2){
							position: absolute;
							top:-25px;
							left:71px;
							right:71px;
							>div:nth-child(1){
								position: relative;
								>div:nth-child(1){
									>img{
										width:100%;
									}
								}
								>div:nth-child(2){
									position:absolute ;
									bottom:11px;
									left:7px;
									right:7px;
									text-align: center;
									color:#FFFFFF;
									font-size:20px;
								}
							}
						}
					}
				}
				>div:nth-child(3){
					position: absolute;
					bottom:15px;
					left:72px;
					right:72px;
					color:#FFFFFF;
					font-size:16px;
					text-align: center;
				}
			}
		}
		>div:nth-child(2){
			position: relative;
			width:110px;
			margin:auto;
			margin-top:27px;
			>div:nth-child(1){
				>img{
					width: 100%;
				}
			}
			>div:nth-child(2){
				width:100%;
				position: absolute;
				left:0;
				top:0;
				text-align: center;
				font-size: 24px;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 32px;
			}
		}
	}
</style>
